<!DOCTYPE html>

<html lang="en">

	<head>

		<meta charset="UTF-8">

		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			button {
				width: 80px;
				height: 30px;
				border: none;
			}
			
			#div1>div {
				width: 300px;
				height: 200px;
				border: 1px solid #000;
				font-size: 50px;
				text-align: center;
				line-height: 200px;
				display: none;
			}
			
			#div1>button.active {
				background-color: black;
				color: white;
			}
			
			#div1>div.active {
				display: block;
			}
		</style>

		<script>
			window.onload = function() {

				var t1 = new Tab("#div1") //创建

				t1.cLick() //初始化

			}

			function Tab(id) {

				this.oDiv = document.querySelector(id)

				this.aBtn = this.oDiv.querySelectorAll("button")

				this.aDiv = this.oDiv.querySelectorAll("div");

			}

			Tab.prototype.cLick = function() {

				for(var i = 0; i < this.aBtn.length; i++) {

					this.aBtn[i].index = i;

					var This = this;

					this.aBtn[i].onclick = function() {

						This.divTab(this)

					}

				}

			}

			Tab.prototype.divTab = function(oBtn) {
				for(var i = 0; i < this.aBtn.length; i++) {

					this.aBtn[i].className = "";

					this.aDiv[i].style.display = "none";

				}

				oBtn.className = "active";

				this.aDiv[oBtn.index].style.display = "block"

			}
		</script>
	</head>
	
	<body>

		<div id="div1">
			<button class="active">按钮1</button>
			<button>按钮2</button>
			<button>按钮3</button>
			<div class="active">111111</div>
			<div>222222</div>
			<div>333333</div>
		</div>
	</body>

</html>